<template>
	<!-- :style="{'height':height+'rpx'}" -->
	<view class="detail-body" >
		<!-- 头部内容 -->
		<view class="body-photograph-header">
			<view class="photograph-header-left">
				<uv-avatar class="avatar" size="64rpx" :src="api.FileById+data.appUserAvatar"></uv-avatar>
				<span class="nickName">&nbsp;{{data.appUserNickName}}</span>
			</view>
			<view class="follow" @click="follow(data.appUserId)">关注</view>
		</view>
		<!-- 图片 -->
		<view class="body-photograph-image">
			<!-- <uv-album :urls="item.files" keyName="url" multipleSize="244rpx" space="8rpx"></uv-album> -->
			<uv-image :customStyle="{'margin-bottom':'8rpx;'}" v-for="file in data.files" :src="file.url"
				:width="file.width" :height="file.height"></uv-image>
		</view>
		<!-- 名称与详情 -->
		<view class="body-photograph-content">
			<p class="content-name">{{data.name}}</p>
			<uv-text :text="data.description"></uv-text>
		</view>
		<!-- 标签 -->
		<view class="body-photograph-tags">
			<uv-tags v-for="tag in data.tagList" borderColor="white" :text="'#'+tag" plain size="mini"
				type="primary"></uv-tags>
		</view>
		<view style="background-color: #eee;height: 20rpx;"></view>
		<view class="body-photograph-message">
			<view class="message-title">
				作品评论
			</view>
			<uv-line></uv-line>
			<view class="message-content">
				<view v-for="item in comments">
					<view class="content-item">
						<uv-avatar class="avatar" size="64rpx" :src="api.FileById+item.appUserAvatar"></uv-avatar>
						<view class="right">
							<view class="nickName">{{item.appUserNickName}}</view>
							<view style="font-size: 28rpx;">{{item.content}}</view>
						</view>
						<!-- <view class="content-flex"><uv-icon name="warning-fill"></uv-icon></view> -->
					</view>
					
					<uv-line></uv-line>
				</view>
			</view>
		</view>
		<view class="detail-bottom">
			<view class="bottom-input">
				<uv-input v-model='comment.content' :custom-style="{height:'34rpx'}" placeholder="请输入内容" border="surround" ></uv-input>
			</view>
			<view class="bottom-send">
				<uv-button  :custom-style="{height:'60rpx'}" type="primary" text="发送" @click="addComment"></uv-button>
			</view>
		</view>

		<view class="detail-flex">
			<view @click="likeChange">
				<uv-icon v-if="data.isLiked" class="flex-item" name="heart-fill" color="#e43d30" size="60rpx"></uv-icon>
				<uv-icon v-else class="flex-item" name="heart" color="#606266" size="60rpx"></uv-icon>
			</view>
			<view @click='starShow'>
				<uv-icon v-if="data.isStar" class="flex-item" name="star-fill" color="#efc24e" size="60rpx"></uv-icon>
				<uv-icon v-else class="flex-item" name="star" color="#efc24e" size="60rpx"></uv-icon>
			</view>
			
			<uv-icon class="flex-item" name="warning-fill" color="#efc24e" size="60rpx" @click="toReport"></uv-icon>
		</view>
		<!-- 收藏 -->
		<uv-popup ref="popup" mode="bottom" custom-style="height: 600rpx;" @change="change">
			<view class="pop-star">
				<view class="star-item" v-for="item in stars" @click="addStarItem(item.id)">
					<!-- <uv-avatar shape="square" v-if="item.children.length != 0" :src="api.FileById+item.children[0].photographFileShowId"></uv-avatar> -->
					<uv-image radius="4" width="80rpx" mode="aspectFill" height="80rpx" v-if="item.children.length != 0" :src="api.FileById+item.children[0].photographFileShowId"></uv-image>
					<uv-avatar shape="square" v-else icon="star-fill" fontSize="22"></uv-avatar>
					<view>
						<view class="item-name">
							{{item.name}}
						</view>
						<view class="item-publicly" v-if="item.isPublicly">
							公开<uv-icon name="lock-opened-fill"></uv-icon>
						</view>
						<view class="item-publicly" v-else>
							私密<uv-icon name="lock-fill"></uv-icon>
						</view>
					</view>
				</view>
			</view>
		</uv-popup>
		
		<!-- 举报 -->
		<!-- <uv-modal ref="reportModal" title="举报稿件"  @confirm="photographReportChange">
			<view class="report">
				<uv-radio-group v-model="radiovalue">
					<view v-for="typ in reportTypes">
						<view class="report-title">
							违反法律法规
						</view>
							<uv-radio 
								:customStyle="{margin: '8px'}" 
								v-for="item in reportDatas.filter(x=>x.description == typ)" 
								:label="item.name" 
								:name="item.name">
							</uv-radio>
					</view>
					
					</uv-radio-group> -->
	</view>
	<uv-toast ref="toast"></uv-toast>
	
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		useLayouterStore
	} from '@/stores/layouter'
	const layouterStore = useLayouterStore()
	const height = ref(layouterStore.screenHeight - 120)
	import api from './api'
	const id = ref('')
	const data = ref({
		appUserAvatar: '0b2af875-2045-4be0-88cb-c6d53c395a64'
	})
	//评论
	const comments = ref([])
	const comment = ref({photographId:'',parentCommentId:null,content:''})
	const addComment = ()=>{
		api.addComment(comment.value).then(res=>{
			if(res.successed){
				toast.value.show({type:'success',message:'评论成功!'})
				getCommentByPhotographId()
				comment.value.parentCommentId = null;
				comment.value.content = '';
			}
		})
	}
	onMounted(() => {
		let pages = getCurrentPages(); // 获取当前打开过的页面路由数组
		id.value = pages[pages.length - 1].options.id; // 获取当前页面栈的实例
		console.log('作品id:', id.value);
		comment.value.photographId = id.value
		getPhotographById()
		getCommentByPhotographId()
		api.addHistory(id.value)
	})
	//举报相关
	//跳转到举报作品页面
	const toReport = ()=>{
		uni.navigateTo({
			url:'/pages/report/report?id='+id.value
		})
	}
	//类型列表
	const reportDatas = ref([])
	const reportTypes = ['违反法律法规','谣言及不实信息','投稿不规范','不友善行为','违反公序良俗']
	//举报内容
	const photographReportData = ref({})
	const reportModal = ref(false)
	const radiovalue = ref(1)
	// 获取举报类型
	const getReportType = ()=>{
		api.getReportType().then(res=>{
			reportDatas.value = res.datas
			console.log('举报类型',res.datas)
		})
	}
	//添加
	const photographReportChange  =()=>{
		console.log(photographReportData.value);
	}
	
	const clickReport = ()=>{
		if(reportDatas.value.length == 0){
			getReportType()
		}
		reportModal.value.open()
		photographReportData.value = {}
	}
	
	const popup = ref()
	const stars = ref([])
	const starShow = ()=>{
		if(!data.value.isStar){
			api.getStar().then(res=>{
				stars.value = res.datas
				console.log(stars.value);
			})
			popup.value.open()
		}else{
			api.removeStarItem(id.value).then(res=>{
				toast.value.show({type:'success',message:'取消成功!'})
				data.value.isStar = false
			})
		}
	}
	const addStarItem = (starId)=>{
		api.addStarItem({starId:starId,photographId:id.value}).then(res=>{
			if(res.successed){
				toast.value.show({type:'success',message:'收藏成功!'})
				data.value.isStar = true
				popup.value.close()
			}
		})
	}
	
	const toast = ref(null);
	const likeChange = () => {
		api.likeChange(data.value.id).then(res => {
			let message = ''
			if (res.message == '添加成功!') {
				message = '点赞成功!'
			} else {
				message = '取消点赞!'
			}
			data.value.isLiked = !data.value.isLiked
			toast.value.show({
				message: message,
				type: 'success',
				duration: 1200,
				position: 'top'
			});
		})
	}

	const setSize = (list, index, width, height) => {
		list[index].width = width
		list[index].height = height
	}
	const getCommentByPhotographId = () => {
		api.getCommentByPhotographId(id.value).then(res => {
			comments.value = res.datas
			console.log(comments.value);
		})
	}

	const getPhotographById = () => {
		api.getPhotographWithLikeStatusById(id.value).then(res => {
			if (res.successed) {
				data.value = res.data
				if (data.value.tags) {
					data.value.tagList = data.value.tags.split(",")
				} else {
					data.value.tagList = []
				}
				if (data.value.filesIds) {
					data.value.files = data.value.filesIds.split(",").map(id => ({
						width: "224rpx",
						url: api.FileById + id,
						height: "224rpx",
						id: id
					}));
					if (data.value.files.length == 8 || data.value.files.length == 5 || data.value.files
						.length == 2) {
						setSize(data.value.files, 0, '338rpx', '338rpx')
						setSize(data.value.files, 1, '338rpx', '338rpx')
					} else if (data.value.files.length == 1 || data.value.files.length == 3 || data.value.files
						.length ==
						4 || data.value.files.length == 7) {
						api.getDimensionsById(data.value.files[0].id).then(res => {
							let size = res.split(",")
							let t = size[0] / 686
							setSize(data.value.files, 0, '686rpx', size[1] / t + 'rpx')
							if (data.value.files.length == 1 || data.value.files.length == 4 || data
								.value.files
								.length == 7) {
								return
							}
							setSize(data.value.files, 1, '338rpx', '338rpx')
							setSize(data.value.files, 2, '338rpx', '338rpx')
							console.log(res);
						})
					}

				} else {
					data.value.files = [];
				}

				console.log(data.value);
			}
		})
	}
</script>

<style lang="scss">
	.detail-body {
		overflow-y: auto;
		// position: relative;
		padding: bottom 200rpx ;
		height: 1316rpx;
		.pop-star{
			padding: 40rpx;
			.star-item{
				height: 80rpx;
				    border-bottom: #a6a6a6 1px solid;
				    padding: 20rpx 0;
					display: flex;
					justify-content: left;
					gap:20rpx;
				.item-name{
					line-height: 40rpx;
					font-size: 28rpx;
				}
				.item-publicly{
					line-height: 40rpx;
					font-size: 20rpx;
					display: flex;
					justify-content: left;
					color: #666;
				}
			}
		}
		.detail-flex {
			position: fixed;
			top: 900rpx;
			right: 40rpx;

			.flex-item {
				margin-bottom: 20rpx;
			}
		}

		.detail-bottom {
			height: 80rpx;
			padding: 28rpx;
			position: absolute;
			bottom: 0;
			display: flex;
			width: 92%;
			justify-content: space-between;
			.bottom-input{
				width: 70%;
			}
			.bottom-send{
				width: 25%;
			}
			
		}

		.body-photograph-message {
			padding: 32rpx;

			.message-title {
				color: #a6a6a6;
				padding-bottom: 30rpx;
			}

			.content-item {
				display: flex;
				justify-content: left;
				padding: 30rpx 0;
				position: relative;
				.content-flex{
					position: absolute;
					    right: 60rpx;
					    top: 40rpx;
				}
				.nickName {
					font-size: 28rpx;
					height: 64rpx;
					line-height: 64rpx;
				}

				.right {
					padding-left: 20rpx;
				}
			}
		}

		.body-photograph-header {
			height: 50rpx;
			padding: 32rpx;
			display: flex;
			justify-content: space-between;

			// position: relative;

			.photograph-header-left {
				display: flex;
				justify-content: space-between;

				.nickName {
					// position: absolute;
					// top:30rpx;
					// left:90rpx;
					font-size: 28rpx;
					height: 64rpx;
					line-height: 64rpx;
				}
			}

			.follow {
				width: 128rpx;
				height: 50rpx;

				border-radius: 30rpx;
				background-color: #f8c950;
				font-size: 28rpx;
				text-align: center;
				line-height: 50rpx;
			}

		}

		.body-photograph-image {
			display: flex;
			justify-content: space-between;
			width: 686rpx;
			flex-flow: wrap;
			padding: 0 32rpx;
			border-radius: 20rpx;
		}

		.body-photograph-content {
			padding: 24rpx 32rpx 18rpx 32rpx;

			.content-name {
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 6rpx;
			}
		}

		.body-photograph-tags {
			padding: 0 32rpx;
			width: 686rpx;
			display: flex;
			ustify-content: flex-start;
			overflow-x: auto;
			white-space: nowrap;
		}
	}
</style>